<template>
  <div id="outsourcing">
    <div class="outsourcing">
      <div class="documentInput" v-show="from.isShow">
        <el-input placeholder="销售订单号" v-model="from.salesOrder" clearable>
        </el-input>
      </div>
      <div class="documentStatesInput" v-show="!from.isShow">
        <el-input placeholder="单据编码" v-model="from.documentInput" clearable>
        </el-input>
      </div>
      <div class="documentStatesInput" v-show="!from.isShow">
        <el-input placeholder="客户名称" v-model="from.customerName" clearable>
        </el-input>
      </div>
      <div class="saleInput" v-show="from.isShow">
        <el-input placeholder="单据编码" v-model="from.documentInput" clearable>
        </el-input>
      </div>
      <div class="materialInput" v-show="from.isShow">
        <el-input placeholder="客户名称" v-model="from.customerName" clearable>
        </el-input>
      </div>
      <div class="materialNameInput" v-show="isShow">
        <el-input placeholder="销售员" v-model="from.salesperson" clearable>
        </el-input>
      </div>
      <div class="documentStatesInput" v-show="!from.isShow">
        <el-select
          class="documentState"
          v-model="from.documentStateValue"
          clearable
          placeholder="单据状态"
        >
          <el-option
            v-for="item in documentOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="businessStatesInput" v-show="!from.isShow">
        <el-select
          v-model="from.businessStateValue"
          clearable
          placeholder="业务状态"
        >
          <el-option
            v-for="item in businessOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="materialNameInput" v-show="from.isShow">
        <el-input
          placeholder="物料名称"
          v-model="from.materialNameInput"
          clearable
        >
        </el-input>
      </div>
      <div class="timeInput">
        <el-date-picker
          v-model="from.timeInput"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <div class="headerSearch">
        <el-button icon="el-icon-search" type="primary" @click="Search"
          >搜索</el-button
        >
      </div>
    </div>
    <div class="header-Bottom">
      <div class="header-Bottom-Left">
        <div class="document">
          <el-button
            :icon="
              from.isShow ? 'el-icon-document' : 'el-icon-c-scale-to-original'
            "
            type="primary"
            @click="isShow()"
            >{{ from.isShow ? "单据" : "明细" }}</el-button
          >
        </div>
        <div class="selectBut">
          <el-button icon="el-icon-menu" type="primary" @click="selectAll"
            >查询所有</el-button
          >
        </div>
        <div class="addBut">
          <el-button
            icon="el-icon-plus"
            type="primary"
            plain
            @click="Addoutsourcing"
            >新增</el-button
          >
          <el-button
            icon="el-icon-download"
            v-show="from.isShow"
            type="warning"
            plain
            >导出</el-button
          >
          <el-button
            icon="el-icon-delete"
            v-show="!from.isShow"
            type="danger"
            @click="deleteSelect"
            plain
            >删除</el-button
          >
          <el-button
            icon="el-icon-bell"
            type="success"
            v-show="!from.isShow"
            :disabled="from.disabled"
            plain
            @click="process"
            >审核</el-button
          >
          <el-button
            icon="el-icon-close-notification"
            type="info"
            v-show="!from.isShow"
            :disabled="from.disabled"
            @click="returnProcess"
            plain
            >反审核</el-button
          >
        </div>
      </div>
    </div>
    <div class="outsourcingTable">
      <OutsourcingTable
        :headData="headData"
        :tableData="tableData"
        :pageSizes="from.pageSizes"
        :pageNum="from.pageNum"
        :pageSize="from.pageSize"
        :isShow="from.isShow"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        @select="select"
      >
        <template v-slot:DocumentCode="{ row }">
          <div class="DocumentCode">{{ row.DocumentCode }}</div>
        </template>
        <template v-slot:DocumentStatus="{ row }">
          <div
            class="DocumentStatus"
            :class="
              row.DocumentStatus[0].value == '1'
                ? 'open'
                : row.DocumentStatus[0].value == '2'
                ? 'auditing'
                : 'return'
            "
          >
            {{
              row.DocumentStatus[0].value == "1"
                ? "开立"
                : row.DocumentStatus[0].value == "2"
                ? "审核"
                : "退回"
            }}
          </div>
        </template>
        <template v-slot:materialName="{ row }">
          <div class="materialName" @click="openDrawer(row.materialName)">
            {{ row.materialName }}
          </div>
        </template>
        <template v-slot:operation="{ row }">
          <div>
            <span class="examine" @click="lookup(row)">查看</span>
            <span class="edit" @click="editOperation(row)">编辑</span>
            <span class="delete" @click="deleteOperation(row.Serial)"
              >删除</span
            >
          </div>
        </template>
      </OutsourcingTable>
    </div>
    <div class="drawer">
      <el-drawer
        :title="from.title"
        :visible.sync="from.drawer"
        :direction="from.direction"
      >
        <span>我来啦!</span>
      </el-drawer>
    </div>
  </div>
</template>
<script>
import headData from "@/menuList/deliveryHeadData.json";
import tableData from "@/menuList/deliveryTableData.json";
import OutsourcingTable from "@/ComponentsTable/outsourcingTable";
export default {
  name: "outsourcing",
  components: {
    OutsourcingTable,
  },
  data() {
    return {
      from: {
        salesOrder: "",
        isShow: 1,
        businessStateValue: "",
        documentStateValue: "",
        documentInput: "",
        saleInput: "",
        customerName: "",
        salesperson: "",
        materialNameInput: "",
        timeInput: "",
        getTime: "",
        pageNum: 1,
        pageSize: 10,
        total: 0,
        disabled: false,
        pageSizes: [5, 10, 20, 30],
        drawer: false,
        title: "",
        direction: "rtl",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      businessOptions: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "挂起",
        },
        {
          value: "3",
          label: "手工关闭",
        },
        {
          value: "4",
          label: "系统关闭",
        },
      ],
      documentOptions: [
        {
          value: "1",
          label: "开立",
        },
        {
          value: "2",
          label: "审核",
        },
        {
          value: "3",
          label: "退回",
        },
      ],
      options: [
        {
          value: "1",
          label: "成品仓",
        },
        {
          value: "2",
          label: "半成品仓",
        },
        {
          value: "3",
          label: "零部件仓",
        },
        {
          value: "4",
          label: "原料仓",
        },
        {
          value: "5",
          label: "五金仓",
        },
      ],
      headData: [],
      tableData: [],
      selection: [],
    };
  },
  methods: {
    deleteSelect(){
     this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
  confirmButtonText: "确定",
  cancelButtonText: "取消",
  type: "warning",
})
  .then(() => {
    this.$message({
      type: "success",
      message: "删除成功!",
    });
    for (let i in this.tableData) {
     for(let item in this.selection){
       if(this.tableData[i].Serial==this.selection[item].Serial){
         this.tableData.splice(i,1)
       }
     }
    }
    console.log("jj");
  })
  .catch(() => {
    this.$message({
      type: "info",
      message: "已取消删除",
    });
  });
   },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.from.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.from.pageNum = val;
    },
    isShow() {
      this.from.isShow = !this.from.isShow;
      if (!this.from.isShow) {
        this.from.isShow = 0;
      } else {
        this.from.isShow = 1;
      }
    },
    forDate() {
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      this.from.getTime = year + "年" + "-" + month + "月";
    },
    Addoutsourcing() {
      this.$router.push({
        name: "AddShipment",
        params: { id: 1 },
      });
      this.$emit("chage", "新增退货单");
    },
    select(selection) {
      console.log(selection);
      this.from.disabled = true;
      if (selection.length > 0) {
        this.from.disabled = false;
      }
      this.selection = [];
      this.selection = selection;
      console.log(this.selection);
    },
    process() {
  this.$confirm("确定审核选中入库单?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let type = false;
      let arr = [];
      for (let i in this.selection) {
        if (this.selection[i].DocumentStatus[0].value == "1") {
          arr.push(i);
          console.log(this.num);
        } else if (this.selection[i].DocumentStatus[0].value != "1") {
          type = true;
        }
      }
      if (type) {
        this.$message({
          type: "error",
          message: "单据状态必须为开立状态",
        });
      } else {
        for (let i in arr) {
          this.selection[arr[i]].DocumentStatus[0].value = "2";
        }
        this.$message({
          type: "success",
          message: "审核成功!",
        });
      }
    })
    .catch(() => {
      this.$message({
        type: "info",
        message: "已取消删除",
      });
    });
},
returnProcess() {
   this.$confirm("确定撤销审核选中入库单?", "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
   })
     .then(() => {
       let type = false;
       let arr = [];
       for (let i in this.selection) {
         if (this.selection[i].DocumentStatus[0].value == "2") {
           arr.push(i);
         } else if (this.selection[i].DocumentStatus[0].value != "2") {
           type = true;
         }
       }
       if (type) {
         this.$message({
           type: "error",
           message: "单据状态必须为审核状态",
         });
       } else {
         for (let i in arr) {
           this.selection[arr[i]].DocumentStatus[0].value = "3";
         }
         this.$message({
           type: "success",
           message: "反审核成功!",
         });
       }
     })
     .catch(() => {
       this.$message({
         type: "info",
         message: "已取消反审核",
       });
     });
 },
    lookup(row) {
      console.log(row);
      this.$emit("chage", "查看发货单");
      //查看传值
      this.$router.push({
        name: "AddShipment",
        params: {
          rowData: row,
          id: 0,
        },
      });
    },
    selectAll() {
      this.tableData = tableData.tableData;
    },
    Search() {
      let arr = this.tableData.filter((item, index) => {
   return item.SalesOrder == this.from.salesOrder;
 });
 this.tableData = arr;
    },
    openDrawer(materialName) {
      this.from.title = materialName;
      this.from.drawer = true;
    },
    deleteOperation(Serial) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          for (let i in this.tableData) {
            if (this.tableData[i].Serial == Serial) {
              this.tableData.splice(i, 1);
            }
          }
          console.log("jj");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editOperation(row) {
      console.log(row);
      this.$emit("chage", "新增发货单");
      this.$router.push({
        name: "AddShipment",
        params: {
          rowData: row,
          id: 2,
        },
      });
    },
  },
  created() {
    this.headData = headData.headData;
    this.tableData = tableData.tableData;
    this.from.pageSize = this.from.pageSizes[0];
  },
  mounted() {
    this.forDate();
  },
};
</script>
<style lang="less"  scoped>
#outsourcing {
  position: relative;
}
.outsourcing {
  display: flex;
  margin-bottom: 25px;
  .businessStatesInput,
  .documentInput,
  .saleInput,
  .materialInput,
  .materialNameInput,
  .timeInput,
  .documentStatesInput {
    margin-right: 10px;
  }
  .documentState {
    width: 150px !important;
  }
}

.header-Bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  .header-Bottom-Left {
    display: flex;
    .document,
    .selectBut,
    .elSelect,
    .addBut {
      margin-right: 10px;
    }
  }
  .header-Bottom-right {
    .previousMonth,
    .nextMonth {
      color: #1890ff;
      font-size: 13px;
      cursor: pointer;
    }
    .getTime {
      font-size: 13px;
      font-weight: 500;
    }
  }
}
.outsourcingTable {
  margin-top: 20px;
  .DocumentCode {
    color: #18aeff;
  }
  .open {
    color: #e6a23c;
  }
  .auditing {
    color: #7fcc5a;
  }
  .return {
    color: #909399;
  }
  .examine {
    color: #54beff;
    cursor: pointer;
  }
  .edit {
    color: #50d3ab;
    cursor: pointer;
  }
  .delete {
    color: #ff4984;
    cursor: pointer;
  }
  .materialName {
    cursor: pointer;
  }
}
</style>
<style>
.outsourcing .el-input__inner {
  height: 36px;
  line-height: 36px;
  width: 200px;
}
.outsourcing .el-button--primary {
  height: 36px;
  line-height: 36px;
  padding: 0 20px;
}
.outsourcing .el-date-editor .el-range-separator {
  line-height: 30px;
}
.header-Bottom .el-button--primary {
  height: 30px;
  line-height: 30px;
  padding: 0 18px;
  font-size: 12px;
}
.header-Bottom .selectBut .el-button--primary {
  background: #e8f4ff;
  color: #1890ff;
}
.header-Bottom .el-select .el-input__inner {
  height: 30px;
  line-height: 30px;
  width: 150px;
}
.documentStatesInput .el-select .el-input__inner {
  width: 150px;
}
.businessStatesInput .el-select .el-input__inner {
  width: 120px;
}
.businessStatesInput .el-input__icon,
.documentStatesInput .el-input__icon {
  line-height: 30px;
}
.header-Bottom .elSelect .el-input__icon {
  line-height: 30px;
}

.header-Bottom .addBut .el-button {
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
}

.outsourcingTable .el-table th.el-table__cell {
  background: #f8f8f9;
  font-weight: 500;
  text-align: center;
  color: #000;
}
.outsourcingTable .el-table .el-table__cell {
  text-align: center;
  padding: 6px 0;
}
</style>
  